<!DOCTYPE html>
<html>
<meta charset="UTF-8" />
<meta name="renderer" content="webkit">
<head>
<title>在线设备</title>
<link href="/vendor/bootstrap/css/bootstrap.css" rel="stylesheet">
<script src="/vendor/jquery/jquery-1.10.2.min.js"></script>
<script src="/js/lib/jquery-confirm.js"></script>
<link href="/css/lib//jquery-confirm.css" rel="stylesheet">
<script src="/js/common.js"></script>
<link href="/css/common.css" rel="stylesheet">
<script src="/js/lib/echarts/echarts.min.js"></script>
<script src="/js/lib/echarts/echarts-liquidfill.min.js"></script>
<script src="/js/lib/vue/vue.min.js"></script>
<script src="/js/online-monitor.js"></script>
<style type="text/css">
html, body {
	background-color: gray;
	color: white !important;
}

.panel-backgroud {
	background: #162a5f;
}

.my-main {
	float: left;
	background-color: white;
	height: 200px;
	width: 19%;
	margin-left: 0.8%;
	margin-top: 0.8%;
	height: 200px;
}

.device-process {
	width: 40%;
	height: 100%;
	background: blue;
	float: left;
}

.device-info {
	width: 60%;
	height: 100%;
	background: #2F4F4F;
	float: left;
	text-align: left;
	padding-top: 1em;
	padding-left: 1em;
}

.process-bar {
	background: white;
	width: 100%;
	height: 10%;
}

.process-value {
	background: green;
	width: 50%;
	height: 100%;
}
</style>
</head>

<body>
	<!-- 数据展示 -->
	<div class="nav text-center">
		<h2>在线设备</h2>
	</div>
	<div id="app" class="container-fuil">
		<div class="my-main" v-for="d in divs">
			<div :id="d" style="width: 60%; height: 100%; background: red;"></div>
		</div>
	</div>
	<br />
</body>

<script type="text/javascript">
	/*
	var ids = []
	for (var i = 1; i <= 5; i++) {
		ids.push('div' + i)
	}
	new Vue({
		el : '#app',
		data : {
			divs : ids
		},
		mounted : function() {
			//this.gen();
		},
		methods : {
			gen : function() {
				var value = 0.25
				var data = []
				data.push(value)
				data.push(value)
				data.push(value)
				data.push(value)
				data.push(value)
				var option = {
					backgroundColor : '#1b2735',
					title : {
						text : 'CPU使用率',
						textStyle : {
							fontWeight : 'normal',
							fontSize : 14,
							color : 'white'
						}
					},
					series : [ {
						type : 'liquidFill',
						radius : '80%',
						data : data,
						backgroundStyle : {
							borderWidth : 4,
							borderColor : 'rgb(255,0,255,0.9)',
							color : 'rgb(255,0,255,0.01)'
						},
						label : {
							normal : {
								formatter : value * 100 + '%',
								textStyle : {
									fontSize : 25
								}
							}
						}
					} ]
				}
				var divs = this.divs
				var charts = []
				for (var i = 0; i < this.divs.length; i++) {
					var id = divs[i]
					var panel = document.getElementById(id);
					var chart = echarts.init(panel);
					chart.setOption(option);
					charts.push(chart)
				}

				// 图片随窗口大小自适应
				window.onresize = function() {
					for (var i = 0; i < divs.length; i++) {
						charts[i].resize()
					}
				}

				function toDecimal(x) { 
					  var f = parseFloat(x); 
					  if (isNaN(f)) { 
					  return; 
					  } 
					  f = Math.round(x*100)/100; 
					  return f; 
					 } 


				var ii = 0.01
				var v = 0.02
				var timer = setInterval(function() {
					for (var i = 0; i < divs.length; i++) {
						v = v + ii
						if(v>1){
							v=0.01
						}
						v=toDecimal(v)
						var t=String(v)
						console.log('设置' + i + ',' + v)
						//option.series[0].data=[v,v,v,v,v]
						charts[i].setOption({
							series : [ {
								data : [ t,t,t,t,t ],
								label : {
									normal : {
										formatter : v * 100 + '%'
									}
								}
							} ]
						});
					}
				}, 2000);
			}
		}
	})
	
	 */
</script>
</html>